<template>
  <div>
    <van-row style="padding-top: 1rem">
      <van-col span="7">账号:<input type="text" width="3rem"></van-col>
      <van-col span="7">姓名:<input type="text" v-model="name"></van-col>
      <van-col span="7">手机号:<input type="text"></van-col>
      <van-col span="3"><van-button type="primary" size="small" @click="querydata">查询</van-button><van-button size="small">重置</van-button></van-col>
    </van-row>
    <van-row style="padding-top: 1rem;padding-bottom: 1% ">
      <van-col span="3"><van-button type="primary" size="small" >新增</van-button></van-col>
      <van-col span="3"><van-button  size="small" >删除</van-button></van-col>
      <van-col span="3"><van-button size="small">导入</van-button></van-col>
      <van-col span="3"><van-button size="small">导出</van-button></van-col>
      <van-col span="3"><van-button  size="small">冻结</van-button></van-col>
      <van-col span="3"><van-button  size="small">解冻</van-button></van-col>
      <van-col span="3"><van-button size="small">回收站</van-button></van-col>
    </van-row>
    <van-row>
      <van-col span="4"><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree></van-col>
      <van-col span="20">
        <div>
          <el-table
              :data="datalist"
              height="250"
              border
              style="width: 100%">
            <el-table-column
                prop="acount"
                label="账号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="gender"
                label="性别">
            </el-table-column>
            <el-table-column
                prop="mobile"
                label="手机号">
            </el-table-column>
            <el-table-column
                prop="email"
                label="邮箱">
            </el-table-column>
            <el-table-column
                prop="number"
                label="工号">
            </el-table-column>
          </el-table>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import myaxios from "../../../https/myaxios";
import fileDownload from "js-file-download";

export default {
  name: "user_manage",
  // props:["data","datalist"],
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      datalist:[],
      // name:'',
      data:[],
      name:''
    }
  },
  methods: {
    querydata(){
      myaxios('getdatas?text='+this.name,'get').then(res=>{
        this.datalist=res.list
        this.getdata()
        console.log(this.datalist)
      })
    },
    // showPopup(){
    //   this.show = true;
    // },
    getuserdata(){
      myaxios('userslist','get').then(res=>{
        this.datalist=res.list
        this.getdata()
        console.log(this.datalist)
      })
    },
    getdata(){
      myaxios('group','get').then(res=>{
        this.data = res.list
      })
    },
    handleNodeClick(data) {
      console.log(data)
    },
    upload(file){
      let data = new FormData()
      data.append("file",file.file)
      console.log(file)
      myaxios("upload", "post", data).then(res=>{
        console.log(res.msg)
      })
    },
    download(){
      myaxios("download", "post").then(res=>{
        fileDownload(res.data,'file.xls');
      })
      // axios({url:"http://127.0.0.1:5000/download",method:"get",'responseType':"arraybuffer",}).then(res=>{
      //   fileDownload(res.data,'file.xls');
      // })
    },
  },
  mounted() {
    this.getuserdata()
  }
}
</script>

<style scoped>
.el-table .el-table__cell{
  text-align: center;
}

</style>